@-webkit-keyframes zhuan {
    0% { -webkit-transform: rotate(0deg) }
    100% { -webkit-transform: rotate(360deg) }
}
@-webkit-keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) }
    100% { opacity: 1; -webkit-transform: none; transform: none }
}
@keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) }
    100% { opacity: 1; -webkit-transform: none; transform: none }
}
@-webkit-keyframes bounce {
    0% { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0 }
    20%, 53%, 80% { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
    40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, .050, .855, .060); animation-timing-function: cubic-bezier(0.755, .050, .855, .060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) }
    70% { -webkit-animation-timing-function: cubic-bezier(0.755, .050, .855, .060); animation-timing-function: cubic-bezier(0.755, .050, .855, .060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) }
    90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) }
    100% { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes bounce {
    0% { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0 }
    20%, 53%, 80% { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
    40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, .050, .855, .060); animation-timing-function: cubic-bezier(0.755, .050, .855, .060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) }
    70% { -webkit-animation-timing-function: cubic-bezier(0.755, .050, .855, .060); animation-timing-function: cubic-bezier(0.755, .050, .855, .060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) }
    90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) }
    100% { -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1); animation-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
@-webkit-keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
@keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
}


@-webkit-keyframes swing{
    0%{-webkit-transform:rotateZ(0)}
    100%{-webkit-transform:rotateZ(360deg)}
}
@-moz-keyframes swing{
    0%{-moz-transform:rotateZ(0)}
    100%{-moz-transform:rotateZ(360deg)}
}
@-ms-keyframes swing{
    0%{-ms-transform:rotateZ(0)}
    100%{-ms-transform:rotateZ(360deg)}
}
@-o-keyframes swing{
    0%{-o-transform:rotateZ(0)}
    100%{-o-transform:rotateZ(360deg)}
}
@keyframes swing{
    0%{transform:rotateZ(0)}
    100%{transform:rotateZ(360deg)}
}
/*旋转*/
 @keyframes rotate {
        0% { transform: rotate(0deg) }
        50% { transform: rotate(180deg) }
        100% { transform: rotate(360deg) }
    }
    @-webkit-keyframes rotate {
        0% { -webkit-transform: rotate(0deg) }
        50% { -webkit-transform: rotate(180deg) }
        100% { -webkit-transform: rotate(360deg) }
    }